<!--聊天气泡-->
<script setup lang="ts">
const props = withDefaults(
    defineProps<{
      me: boolean
    }>(),
    {
      me: false
    }
);
</script>
<template>
  <div class="chat-bubble-container" :style="{justifyContent:me?'flex-end':'flex-start'}">
    <div class="avatar" v-if="!me" style="margin-right: 15px">
      <div class="avatar-container">
        <img src="@/assets/image/avatar.jpg">
      </div>
    </div>
    <div class="chat-bubble">
      <div :class="{'triangle':true, 'border':true,'is-me':me,'is-not-me':!me}"></div>
      <div class="chat-content"
           :style="{backgroundColor: me ? '#2C82E0' : '#ffffff',
           color: me ? '#ffffff' : '#1B1A1F'}">
        你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！你好！
      </div>
    </div>
    <div class="avatar" v-if="me" style="margin-left: 15px">
      <div class="avatar-container">
        <img src="@/assets/image/avatar.jpg">
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.chat-bubble-container {
  padding: 10px;
  display: flex;

  .avatar {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    .avatar-container {
      height: 40px;
      width: 40px;
      overflow: hidden;
      border-radius: 50%;
      cursor: pointer;

      img {
        height: 40px;
        width: 40px;
      }
    }
  }

  .chat-bubble {
    word-break: normal;
    position: relative;
    display: flex;
    min-width: 160px;
    min-height: 25px;
    max-width: 40%;
    background-color: #fff;
    border-radius: 8px;

    .chat-content {
      //word-break: break-word;
      min-width: 160px;
      max-width: 100%;
      min-height: 25px;
      padding: 8px;
      line-height: 25px;
      border-radius: 8px;
      font-weight: 500;
    }

    .triangle {
      position: absolute;
      height: 0;
      width: 0;
      overflow: hidden;
      font-size: 0;
      line-height: 0;
      border-style: solid dashed dashed dashed;
      border-width: 7px;
      top: 15px;
    }

    .is-me {
      right: -14px;
      border-top-color: transparent;
      border-left-color: #FFFFFF;
      border-bottom-color: transparent;
      border-right-color: transparent;
    }

    .is-not-me {
      left: -14px;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-right-color: #FFFFFF;
    }
  }
}
</style>
